<template>
  <div>
    <div class="header">
      <header>
        <div class="div" @click="back">
          <img src="../../assets/返回.png" alt="">
          <span>返回</span>
        </div>
        <div class="div">请选择城市</div>
        <div class="div"></div>
      </header>
      <div class="city" @click="clickCity(LocationCity)">
<!--        <img src="../../assets/定位白@2x.png" alt="">-->
        <span>当前定位城市:{{LocationCity}}</span>
      </div>
    </div>
    <div class="content">
      <van-index-bar highlight-color="#1da4f2"
                     sticky>
        <div v-for="(item, index) in list"
             :key="index">
          <van-index-anchor :index="item.zimu" />
                  <van-cell  v-for="(cell, cellIndex) in item.list"
                             :key="cellIndex"
                             @click="clickCity(cell.NAME)"
                             :title="cell.NAME"/>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import BMap from 'BMap'
import cityAll from '../../components/China/CityAll'
import $ from 'jquery'
export default {
  name: 'City',
  data () {
    return {
      LocationCity: '定位中',
      list: cityAll.data,
      height: 0
    }
  },
  mounted () {
    $('.content').css('height', $(window).height() - this.height + 'px')
    // this.getAllcity()
    this.height = $('.header').height()
    console.log(this.list)
  },
  created () {
    this.city()
  },
  activated () {
  },
  methods: {
    city () { // 定义获取城市方法
      const geolocation = new BMap.Geolocation()
      var _this = this
      geolocation.getCurrentPosition(function getinfo (position) {
        let city = position.address.city // 获取城市信息
        // let province = position.address.province // 获取省份信息
        // _this.LocationCity = city
        _this.clickEvent(position)
      }, function (e) {
        _this.LocationCity = '定位失败'
      }, {provider: 'baidu'})
    },
    clickEvent (e) {
      var self = this
      var gc = new BMap.Geocoder()
      var _this = this
      gc.getLocation(e.point, function (rs) {
        var addComp = rs.addressComponents.city
        _this.LocationCity = rs.addressComponents.city
        sessionStorage.setItem('LocationCity', _this.LocationCity)
        // console.log(rs)// 地址信息
      })
    },
    // 获取全国所有市
    // getAllcity () {
    //   this.$http.findShouZiMuCity()
    //     .then(res => {
    //       // console.log(res)
    //       if (res.data.status === 'success') {
    //         this.list = res.data.data
    //         // console.log(this.list)
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 点击某个市
    clickCity (name) {
      sessionStorage.setItem('city', name)
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  .header{
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #FFFFFF;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 1px solid #E5E5E5;
  }
  .div{
    width: 33%;
    display: flex;
    align-items: center;
  }
  .div:nth-child(1){
    color: #1da4f2;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2) {
    justify-content: center;
  }
  .content{
    width: 100%;
    overflow: auto;
  }
  .city{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
  }
  .city span{
    margin-left: 15px;
    font-size: 15px;
  }
</style>
